<template>
  <div class="tags-page">
    <h1 class="page-title">标签云</h1>

    <div class="tags-container">
      <el-tag
        v-for="tag in tags"
        :key="tag.name"
        :type="tag.type"
        effect="light"
        class="tag-item"
        :class="{ 'is-primary': tag.isPrimary, 'is-active': selectedTag === tag.name }"
        @click="filterByTag(tag.name)"
      >
        {{ tag.name }} ({{ tag.count }})
      </el-tag>
    </div>

    <div class="tag-posts" v-if="selectedTag">
      <h2 class="tag-title">
        标签：{{ selectedTag }}
        <el-button type="text" @click="clearFilter">清除筛选</el-button>
      </h2>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="post in displayedPosts" :key="post.id" style="margin-bottom: 20px;">
          <BlogCard :post="post" />
        </el-col>
      </el-row>

      <div class="pagination" v-if="filteredPosts.length > postsPerPage">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="filteredPosts.length"
          :page-size="postsPerPage"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useBlogStore } from '../store/blogStore'
import BlogCard from '../components/BlogCard.vue'

const blogStore = useBlogStore()
const selectedTag = ref('')
const currentPage = ref(1)
const postsPerPage = 6

const tags = [
  { name: '专栏', type: 'success', isPrimary: true, count: 4 },
  { name: '知识星球', type: 'info', isPrimary: false, count: 3 },
  { name: '项目实战', type: 'danger', isPrimary: true, count: 2 },
  { name: '从 0 到 1', type: 'warning', isPrimary: false, count: 2 },
  { name: '工具', type: '', isPrimary: false, count: 2 },
  { name: 'Python', type: 'success', isPrimary: false, count: 1 },
  { name: 'API 调试', type: 'info', isPrimary: false, count: 1 },
  { name: '脚本', type: 'danger', isPrimary: false, count: 1 },
  { name: '汉化', type: 'warning', isPrimary: false, count: 1 },
  { name: '构建言', type: '', isPrimary: false, count: 1 },
  { name: 'Elasticsearch', type: 'success', isPrimary: false, count: 1 },
  { name: '搜索引擎', type: 'info', isPrimary: false, count: 1 },
  { name: '微服务', type: 'danger', isPrimary: false, count: 1 },
  { name: '多模块工程', type: '', isPrimary: false, count: 0 }
]

const filteredPosts = computed(() => {
  if (!selectedTag.value) return []
  return blogStore.posts.filter(post => post.tags.includes(selectedTag.value))
})

const displayedPosts = computed(() => {
  const start = (currentPage.value - 1) * postsPerPage
  return filteredPosts.value.slice(start, start + postsPerPage)
})

const filterByTag = (tagName: string) => {
  selectedTag.value = tagName
  currentPage.value = 1
  window.scrollTo({
    top: 400,
    behavior: 'smooth'
  })
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  window.scrollTo({
    top: document.querySelector('.tag-posts')?.offsetTop,
    behavior: 'smooth'
  })
}

const clearFilter = () => {
  selectedTag.value = ''
  currentPage.value = 1
}

onMounted(() => {
  // 默认选中第一个标签
  if (tags.length > 0) {
    filterByTag(tags[0].name)
  }
})
</script>

<style scoped>
.tags-page {
  width: 100%;
  padding: 20px 0;
}

.page-title {
  margin: 0 0 30px;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  justify-content: center;
}

.tag-item {
  cursor: pointer;
  font-size: 14px;
  padding: 8px 12px;
  transition: all 0.3s;
}

.tag-item:hover {
  transform: scale(1.05);
}

.is-primary {
  font-weight: bold;
  font-size: 16px;
}

.is-active {
  border-color: var(--accent-color);
}

.tag-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.tag-posts {
  margin-top: 40px;
}
</style>
